/**
 * <p/>
 * 实现功能：专家用户
 * <p/>
 *
 * @author 李艳
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Button, message, Input, Modal, Checkbox } from 'antd';
import SimpleTable from "../../../commons/components/SimpleTable";
import { hide, show } from "../../../configs/SharedReducer";
import { freeze, getAllExpertUser } from "./ExpertUserService";
import ExpertUserConfigTabsView from "./ExpertUserConfigTabsView";
import HeadBreadcrumb from "../../../commons/components/breadcrumb/HeadBreadcrumb";
import PageOperateHoc from "../../../commons/components/PageOperateHoc/index.jsx";
import CheckAuth from '../../../commons/components/CheckAuth';
const Search = Input.Search;
const confirm = Modal.confirm;
class ExpertUserTable extends Component {
    constructor(props) {
        super(props);
        this.initPath = [{ name: "专家用户管理" }];
        this.state = {
            data: [],
            modalVisible: false,
            confirmLoading: false,
            selectedRows: [],
            isAdd: false,
            isPositionConfig: false,
            searchValue: ""
        };
    }

    componentWillMount() {
        this.getDataSource()
    }

    onRef = (ref) => {
        this.ref = ref
    };
    getDataSource = (params) => {
        this.props.show();
        getAllExpertUser(params).then(data => {
            this.setState({ data, selectedRows: [] })
        }).catch(e => {
        }).finally(() => {
            this.props.hide();
        })
    };

    handleRowSelectChange = (selectedRows) => {
        this.setState({ selectedRows })
    };
    handleModalVisible = (modalVisible, isAdd = this.state.isAdd) => {
        this.setState({ modalVisible, isAdd })
    };

    judgeSelected = () => {
        if (this.state.selectedRows.length === 0) {
            message.error("请选择一行数据！");
            return false
        }
        return true
    };

    handleModalCancel = () => {
        this.handleModalVisible(false)
    };

    handleSearch = (value) => {
        this.setState({ searchValue: value });
        this.getDataSource({ quickSearchValue: value })
    };

    onFreezeClick = () => {
        if (!this.judgeSelected()) return;
        let thiz = this;
        confirm({
          title: "温馨提示",
          content: "删除后不可恢复，是否确定删除？",
            onOk() {
                thiz.props.show();
                freeze(`?id=${thiz.state.selectedRows[0].id}`, !thiz.state.selectedRows[0].frozen).then(result => {
                    if (result.status === "SUCCESS") {
                        message.success(result.message ? result.message : "请求成功");
                        //刷新本地数据
                        thiz.getDataSource({ quickSearchValue: thiz.state.searchValue });
                    } else {
                        message.error(result.message ? result.message : "请求失败");
                    }
                }).catch(e => {
                }).finally(() => {
                    thiz.props.hide();
                })
            }
        });
    };
    onPositionConfigClick = () => {
        if (!this.judgeSelected()) return;
        this.setDisplay(true)
    };

    setDisplay = (display) => {
        this.setState({ isPositionConfig: display })
    };
    pageChange = (pagination) => {
        this.getDataSource({ 'pageInfo': pagination, quickSearchValue: this.state.searchValue })
    };
    getPathData = () => {
        const { isPositionConfig, selectedRows } = this.state;
        if (isPositionConfig) {
            const path = [{ name: `用户【${selectedRows[0] ? selectedRows[0].name : ""}】` }, { name: "配置" }];
            return [...this.initPath, ...path];
        } else {
            return "";
        }
    };
    getExtra = () => {
        const { isPositionConfig } = this.state;
        if (isPositionConfig) {
            return [
                <Button key={"return"} onClick={() => this.setDisplay(false)}>返回</Button>
            ]
        }
        return null;
    };
    render() {
        const columns = [
            {
                title: '账号',
                dataIndex: 'code',
            },
            {
                title: '名称',
                dataIndex: 'name',
                width: 200
            },
            {
                title: '研究领域',
                dataIndex: 'professionalDomainName',
                width: 240
            },
            {
                title: '有效期',
                dataIndex: 'expireDate',
                width: 140
            },
            {
                title: '冻结',
                dataIndex: 'frozen',
                render: (text, record) => (
                    <div style={{ textAlign: "center" }}>
                        <Checkbox checked={record.frozen === true} disabled={true} />
                    </div>
                ),
            }
        ];

        const title = () => {
            return [
                <Button.Group key={"elseButton"}>
                    <CheckAuth operateCode="BASIC-YHGL-EXPERTUSER-FROZEN" key="frozen">
                        <Button
                            onClick={this.onFreezeClick}>{this.state.selectedRows[0] ? this.state.selectedRows[0].frozen ? "解冻" : "冻结" : "冻结"}</Button>
                    </CheckAuth>
                    <CheckAuth operateCode="BASIC-YHGL-EXPERTUSER-CONFIG" key="config">
                        <Button
                            onClick={this.onPositionConfigClick}>配置</Button>
                    </CheckAuth>
                </Button.Group>

            ]
        };

        //表头搜索框
        const search = () => {
            return [
                <Search
                    key="search"
                    placeholder="输入代码或名称查询"
                    onSearch={value => this.handleSearch(value)}
                    style={{ width: 220 }}
                    allowClear
                />
            ]
        };
        const { isPositionConfig } = this.state;
        return (
            <HeadBreadcrumb
                pathData={this.getPathData()}
                rightExtra={this.getExtra()}
                style={isPositionConfig ? { margin: 0, padding: 0, height: "100%" } : {}}>
                <div className={"tbar-table"} style={{ display: isPositionConfig ? "none" : "block" }}>
                    <div className={'tbar-box'}>
                        <div className={'tbar-btn-box'}>{title()}</div>
                        <div className={'tbar-search-box'}>{search()}</div>
                    </div>
                    <SimpleTable
                        rowsSelected={this.state.selectedRows}
                        onSelectRow={this.handleRowSelectChange}
                        data={this.state.data}
                        columns={columns}
                        pageChange={this.pageChange}
                    />
                </div>
                {
                    isPositionConfig ? <ExpertUserConfigTabsView
                        userInfo={this.state.selectedRows[0] ? this.state.selectedRows[0] : {}}
                        setDisplay={this.setDisplay} /> : null
                }
            </HeadBreadcrumb>
        )
    }
}

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        show: () => {
            dispatch(show())
        },
        hide: () => {
            dispatch(hide())
        },
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PageOperateHoc(ExpertUserTable))



